<template>
  <div>
    <h2>我是App组件</h2>
    {{count}}
<!--    1.直接绑定在子组件便签上-->
<!--    <Brother @changeValue="changeValue"/>-->
<!--    2.间接在子组件上绑定事件-->
        <Brother ref="child"/>
    <hr>
    <Sister/>
  </div>
</template>

<script>
import Brother from "@/components/Item";
import Sister from "@/components/Sister";
export default {
  name: "App",
  components: {Sister, Brother},
  data(){
    return{
      count:1
    }
  },
  mounted() {
  //  2.间接在子组件上绑定事件
    this.$refs.child.$on('changeValue',this.changeValue)
  //  只触发一次
  //   this.$refs.child.$once('changeValue',this.changeValue)
  },
  methods:{
    changeValue(val){
      this.count += val
    }
  }
}
</script>

<style scoped>

</style>